<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的收入 - 阿姨端</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f5f7fa;
            color: #333;
            max-width: 750px;
            margin: 0 auto;
        }

        .gradient-bg {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
        }

        .income-card {
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .income-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .nav-tab.active {
            color: #2563eb;
            position: relative;
        }

        .nav-tab.active::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 3px;
            background-color: #2563eb;
            border-radius: 3px;
        }

        .tab-active {
            color: #4f46e5;
            border-bottom: 2px solid #4f46e5;
        }
    </style>
</head>

<body class="pb-20">
    <!-- 顶部导航 -->
    <div class="bg-white sticky top-0 z-10 shadow-sm">
        <div class="flex items-center justify-between px-4 py-3">
            <button class="text-gray-600" onclick="history.back()">
                <i class="fas fa-chevron-left text-lg"></i>
            </button>
            <h1 class="text-lg font-medium">我的收入</h1>
            <div class="w-6"></div>
        </div>
    </div>

    <!-- 收入概览 -->
    <div class="gradient-bg text-white px-4 py-6">
        <div class="text-center mb-6">
            <p class="text-sm opacity-90 mb-2">本月总收入</p>
            <p class="text-3xl font-bold">¥3,280.50</p>
        </div>

        <div class="grid grid-cols-3 gap-4">
            <div class="text-center">
                <p class="text-sm opacity-90">订单收入</p>
                <p class="text-lg font-bold">¥2,450.00</p>
            </div>
            <div class="text-center">
                <p class="text-sm opacity-90">好评奖励</p>
                <p class="text-lg font-bold">¥320.50</p>
            </div>
            <div class="text-center">
                <p class="text-sm opacity-90">推荐提成</p>
                <p class="text-lg font-bold">¥510.00</p>
            </div>
        </div>
    </div>

    <!-- 时间筛选 -->
    <div class="bg-white px-4 py-3 shadow-sm">
        <div class="flex space-x-6">
            <button class="text-sm font-medium px-1 pb-1 tab-active">本月</button>
            <button class="text-sm font-medium px-1 pb-1 text-gray-500">上月</button>
            <button class="text-sm font-medium px-1 pb-1 text-gray-500">近3个月</button>
            <button class="text-sm font-medium px-1 pb-1 text-gray-500">全部</button>
        </div>
    </div>

    <!-- 收入详情 -->
    <div class="px-4 py-4 space-y-4">
        <!-- 订单收入 -->
        <div class="income-card bg-white rounded-lg p-4">
            <div class="flex items-center justify-between mb-3">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-clipboard-list text-green-600"></i>
                    </div>
                    <div>
                        <h3 class="font-medium">订单收入</h3>
                        <p class="text-sm text-gray-500">月嫂服务 - 26天</p>
                    </div>
                </div>
                <div class="text-right">
                    <p class="font-bold text-green-600">+¥8,800.00</p>
                    <p class="text-xs text-gray-500">2024-06-20</p>
                </div>
            </div>
            <div class="text-xs text-gray-500">
                订单编号: #20240620001 | 雇主: 陈女士
            </div>
        </div>

        <!-- 好评奖励 -->
        <div class="income-card bg-white rounded-lg p-4">
            <div class="flex items-center justify-between mb-3">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-star text-yellow-600"></i>
                    </div>
                    <div>
                        <h3 class="font-medium">好评奖励</h3>
                        <p class="text-sm text-gray-500">5星好评奖励</p>
                    </div>
                </div>
                <div class="text-right">
                    <p class="font-bold text-yellow-600">+¥50.00</p>
                    <p class="text-xs text-gray-500">2024-06-18</p>
                </div>
            </div>
            <div class="text-xs text-gray-500">
                订单编号: #20240615002 | 雇主: 李女士
            </div>
        </div>

        <!-- 推荐提成 -->
        <div class="income-card bg-white rounded-lg p-4">
            <div class="flex items-center justify-between mb-3">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-user-plus text-blue-600"></i>
                    </div>
                    <div>
                        <h3 class="font-medium">推荐提成</h3>
                        <p class="text-sm text-gray-500">推荐新用户下单</p>
                    </div>
                </div>
                <div class="text-right">
                    <p class="font-bold text-blue-600">+¥120.00</p>
                    <p class="text-xs text-gray-500">2024-06-17</p>
                </div>
            </div>
            <div class="text-xs text-gray-500">
                推荐用户: 王女士 | 订单金额: ¥1,200.00
            </div>
        </div>

        <!-- 订单收入2 -->
        <div class="income-card bg-white rounded-lg p-4">
            <div class="flex items-center justify-between mb-3">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-clipboard-list text-green-600"></i>
                    </div>
                    <div>
                        <h3 class="font-medium">订单收入</h3>
                        <p class="text-sm text-gray-500">深度保洁 - 4小时</p>
                    </div>
                </div>
                <div class="text-right">
                    <p class="font-bold text-green-600">+¥298.00</p>
                    <p class="text-xs text-gray-500">2024-06-15</p>
                </div>
            </div>
            <div class="text-xs text-gray-500">
                订单编号: #20240615001 | 雇主: 张先生
            </div>
        </div>

        <!-- 好评奖励2 -->
        <div class="income-card bg-white rounded-lg p-4">
            <div class="flex items-center justify-between mb-3">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-star text-yellow-600"></i>
                    </div>
                    <div>
                        <h3 class="font-medium">好评奖励</h3>
                        <p class="text-sm text-gray-500">5星好评奖励</p>
                    </div>
                </div>
                <div class="text-right">
                    <p class="font-bold text-yellow-600">+¥30.00</p>
                    <p class="text-xs text-gray-500">2024-06-14</p>
                </div>
            </div>
            <div class="text-xs text-gray-500">
                订单编号: #20240612003 | 雇主: 赵女士
            </div>
        </div>

        <!-- 推荐提成2 -->
        <div class="income-card bg-white rounded-lg p-4">
            <div class="flex items-center justify-between mb-3">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-user-plus text-blue-600"></i>
                    </div>
                    <div>
                        <h3 class="font-medium">推荐提成</h3>
                        <p class="text-sm text-gray-500">推荐新用户下单</p>
                    </div>
                </div>
                <div class="text-right">
                    <p class="font-bold text-blue-600">+¥85.00</p>
                    <p class="text-xs text-gray-500">2024-06-12</p>
                </div>
            </div>
            <div class="text-xs text-gray-500">
                推荐用户: 刘先生 | 订单金额: ¥850.00
            </div>
        </div>
    </div>

    <!-- 提现按钮 -->
    <div class="fixed bottom-2 left-0 right-0 px-4" style="max-width: 750px; margin: 0 auto;">
        <button class="w-full py-3 bg-indigo-600 text-white rounded-lg font-medium"
            onclick="window.location.href='withdraw.html'">
            申请提现
        </button>
    </div>

    <!-- 底部导航 -->

    <script>
        // 时间筛选切换
        document.querySelectorAll('.flex.space-x-6 button').forEach(button => {
            button.addEventListener('click', function () {
                document.querySelectorAll('.flex.space-x-6 button').forEach(btn => {
                    btn.classList.remove('tab-active');
                    btn.classList.add('text-gray-500');
                });
                this.classList.add('tab-active');
                this.classList.remove('text-gray-500');

                // 这里可以添加筛选逻辑
                console.log('筛选时间:', this.textContent.trim());
            });
        });

        // 申请提现
        document.querySelector('button[class*="bg-indigo-600"]').addEventListener('click', function () {
            window.location.href = 'withdraw.html';
        });
    </script>
</body>

</html>